<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [defaultHref]="'/services/' + pkgId"></ion-back-button>
    </ion-buttons>
    <ion-title>Interfaces</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top with-widgets">
  <ion-item-group>
    <!-- iff ui -->
    <ng-container *ngIf="ui">
      <ion-item-divider>User Interface</ion-item-divider>
      <app-interfaces-item [interface]="ui"></app-interfaces-item>
    </ng-container>

    <!-- other interface -->
    <ng-container *ngIf="other.length">
      <ion-item-divider>Machine Interfaces</ion-item-divider>
      <div *ngFor="let interface of other" style="margin-bottom: 30px">
        <app-interfaces-item [interface]="interface"></app-interfaces-item>
      </div>
    </ng-container>
  </ion-item-group>
</ion-content>
